<template>
  <fragment>
    <!--任务栏气泡窗-->
    <el-popover ref="popover_task" placement="bottom-end" width="260" v-model="expand">

      <el-row class="text-small">
        <el-col class="border-bottom" style="text-align: left;">
          您有4条待办事项
        </el-col>

        <el-col class="text-box box-small with-border" v-for="(item, idx) in task" :key="idx">
          <span class="box-circle"><i :class="item.icon"></i></span>

          <article >
            <span>{{ item.title }}</span>
            <p>{{ item.content }}</p>
            <span class="pull-right" style="margin-top: 5px">
              <i class="fa fa-clock-o"></i>{{ item.time }}
            </span>
          </article>
        </el-col>

        <el-col style="text-align: right; margin-top: 5px">
          <a>前往查看 ></a>
        </el-col>
      </el-row>
    </el-popover>

    <!--任务栏-->
    <el-row class="sea-toolbar-button" v-popover:popover_task style="float:right;">
      <i class="fa fa-fw fa-list-ul"></i>
      <span>任务</span>
    </el-row>
  </fragment>
</template>

<script>

/**
 * 任务窗
 */
export default {
    name: "task",
    data() {
        return {
            // 是否展开任务栏
            expand: false,
            task: [
                {
                    title: 'This is a new message',
                    content: 'good good study, day day up',
                    icon: 'fa fa-user-circle',
                    time: '2022-06-01 10:00:00'
                }, {
                    title: 'This is a new message',
                    content: 'good good study, day day up',
                    icon: 'fa fa-plus',
                    time: '2022-06-01 10:00:00'
                }, {
                    title: 'This is a new message',
                    content: 'good good study, day day up',
                    icon: 'fa fa-newspaper-o',
                    time: '2022-06-01 10:00:00'
                }, {
                    title: 'This is a new message',
                    content: 'good good study, day day up',
                    icon: 'fa fa-database',
                    time: '2022-06-01 10:00:00'
                }
            ]
        }
    }
}
</script>

<style scoped>

.message-header{
    border-bottom: 1px solid lightgray;
}

.box-circle {
    background-color: #00c0ef;
    height: 46px;
    width: 46px;
    line-height: 46px;
    font-size: 23px;
    display: block;
    float: left;
    text-align: center;
    margin-right: 10px;
}

.box-circle > i {
    color: #ffffff;
}
</style>
